
<template>
  <div>
    <el-row :gutter="element.options.gutter" class="row-body">
      <template v-for="(col, index) in element.items" :key="index">
        <el-col :span="col.options.span" :offset="col.options.offset">
          <cell-col-wrap :key="element.metaRefresh" :col="col" :index="index" :element="element">
            <div class="draggable-container ">
              <draggable class="drawing-board" v-model="col.items" @add="handleAdd($event, index)"
                v-bind="{ group: 'group', animation: 200 }" tag="div" item-key="key" handle=".mover"
                :component-data="{ name: 'fade' }" :disabled="lowCode.disabled &&
                  element?.nestedChain?.indexOf('dialog') == -1
                  ">
                <template #item="{ element, index }">
                  <div>
                    <low-code-parse :element="element" :key="element.key" :index="index" :parent="col">
                    </low-code-parse>
                  </div>
                </template>
              </draggable>
            </div>
          </cell-col-wrap>
        </el-col>
      </template>
    </el-row>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, inject, ref, toRefs } from "vue";
import type {
  LowCodeImp,
  ComponentImp,
  CellImp,
} from "@/components/low-code/core/type";
import cellColWrap from "@/components/low-code/page-designer/components/cell-col-wrap/index.vue";
import { tools } from "@/components/low-code/page-designer/utils";
import clone from "clone";
import { useComponentPretreatment } from "@/components/low-code/page-designer/hooks";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "rowWidget",
  props: ["element"],
  components: { cellColWrap },
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const { element } = toRefs(props);

    const handleAdd = (event: { newIndex: number }, itemIndex: number) => {
      const newIndex = event.newIndex;
      let hasKey = false;
      if (element.value.items[itemIndex]) {
        /****
         * 组件预处理
         */
        if (useComponentPretreatment(lowCode, element.value, newIndex)) return false;
        hasKey = (element.value.items as any)[itemIndex]["items"][newIndex].key
          ? true
          : false;
        let cacheObject = lowCode.copyComponent(
          (element.value.items as any)[itemIndex]["items"][newIndex],
          false
        );
        if (element.value.items[itemIndex]) {
          cacheObject.nestedChain = element.value.nestedChain + "_row";
          (element.value.items as any)[itemIndex]["items"][newIndex] =
            cacheObject;
          lowCode.setcurrentKey(cacheObject.key);
        }
      }
      hasKey && element.value.updateMetaRefresh();
      tools.handleStack.push(clone(lowCode));
    };

    return {
      element,
      handleAdd,
      lowCode,
    };
  },
});
</script>

<style  scoped>
.drawing-board {
  min-height: 40px;
}

.drawing-board .cell-wrap {
  outline: 1px dashed #336699;
  padding-bottom: 10px;
}

.drawing-board .el-col {
  height: fit-content;
}

.drawing-board .cell-wrap.active {
  outline: 2px solid #bb40ff;
}

.row-body {
  min-height: 40px;
}
</style>
